<script setup>
// 你可以在这里导入Element Plus的图标，但如果当前组件不需要它们，可以注释掉或移除
// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "@/router";

const Click=()=>{
  router.push('/application/list')
  // this.$router.push({path:'/house/list'})
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="custom-header">
        <span style="color: #808080; font-weight: bold;">报名审批/</span>
        <span style="color: #333; font-weight: bold;">审批不通过</span>
      </el-header>
      <el-main>
        <div class="icon-container">
          <el-col :sm="12" :lg="6">
            <el-result icon="error">
            </el-result>
          </el-col>

        </div>
        <div class="wenzi">
          <span style="color: #333; font-weight: bold;">审批不通过</span><br>
          <el-text tag="i">感谢您申请加入本组，但很遗憾</el-text><br>
          <el-text tag="i">"人员已满"</el-text>
        </div>
        <div class="biao">
          <div class="zi">
            <span style="color: #333; font-weight: bold; margin-left: 20px;">招宣组名称1</span><br>
            <span style="color: #333; font-weight: bold; margin-left: 20px;">活动ID</span>
            <span style="color: #333; font-weight: bold; margin-left: 110px;">组长：曲丽丽</span>
            <span style="color: #333; font-weight: bold; margin-left: 110px;"> 生效时间：2024.07.10~2025.07.10</span>

          </div>
          <div class="tiao">
            <el-steps style="width: 600px"  :active="3"  finish-status="success" align-center >
              <el-step title="提交申请" description="屈丽丽" />
              <el-step title="招宣组管理员" description="周毛毛" />
              <el-step title="完成" description="" />
            </el-steps>
          </div>
        </div>

        <div style="display: flex; justify-content: center; align-items: center; height: 100px;">
          <el-button type="primary" size="large" @click="Click">返回活动</el-button>
          <el-button type="primary" size="large" plain>查看活动</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  height: 100%;

  .custom-header { // 使用一个自定义类来设置header的高度
    background-color: #F5F6FA;
    padding: 5px;
    color: #333; // 注意：这个颜色设置可能不会影响到内部的span元素
    text-align: left;
    line-height: 10px; // 这通常影响行内元素的高度，但你可能需要直接设置height
    height: 30px; // 设置一个固定的高度
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    padding: 10px;
    height: calc(100% - 30px); // 根据header的高度调整main的高度
  }
  .icon-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 150px; /* 容器高度，根据需要调整 */
  }
  .wenzi {
    text-align:center;
  }
  .biao {
    width: 700px;
    height: 200px;
    background-color: #ecf5ff;
    align-items: center;
    transform: translateX(300px);
    margin-top: 20px;
  }
  .tiao {
    display: flex;
    justify-content: center; /* 居中子元素 */
    /* 如果需要，可以添加一些内边距 */
    padding: 20px;
    text-align:center;
  }

}
</style>